<template>
  <router-link :to="`/post/${post.id}`">
<!--    ${post.id}-->
    <vs-card class="post-card" style="width: 100%;word-break: break-all; word-wrap: break-word">
      <template #title>
        <h3>{{ post.title }}</h3>
        <small>{{post.publicDate.replace('T',' ')}}</small>
      </template>
      <template #img>
        <img :src="post.cover" alt />
      </template>
      <template #text>
        <p class="post-txt">{{ post.des }}</p>
<!--        <small class="post-card-tag">-->
<!--          <b :key="i" v-for="(tag, i) in post.tags" style="margin-right: 5px">-->
<!--            {{ tag }}-->
<!--          </b>-->
<!--        </small>-->
      </template>
      <template #interactions>
        <vs-tooltip right shadow interactivity>
<!--          <Avatar  :src="post.cover"/>-->
          <template #tooltip>
            Posted by
            <b>{{ post.title }}</b>
          </template>
          <vs-button class="btn-chat" shadow primary>
            <i class='bx bx-chat' ></i>
            <span class="span">
          {{ post.commentCount }}
        </span>
          </vs-button>
        </vs-tooltip>
      </template>
    </vs-card>
  </router-link>
</template>

<script>
// import Avatar from '@/components/Avatar.vue'

export default {
  name: 'PostCard',
  props: [
    'post'
  ],
  data: function () {
    return {
      config: this.getConfig().config
    }
  },
  components: {
    // Avatar
  },
  methods: {
  }
}
</script>

<style>
.post-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  display: auto;
}

.post-card .vs-card {
  height: 400px !important;
  width: 400px !important;
}

.post-card-tag {
  position: absolute;
  bottom: 20px;
}
</style>
